<template>
  <div>
    <div class="top">
      <p>巡检任务结果详情</p>
      <el-button type="primary"
                 @click="goback"
                 class="el-icon-back">返回</el-button>
    </div>

    <el-row>
      <el-col :span="6">
        <p>任务名称：
          <span>{{this.$route.params.taskName}}</span>
        </p>
      </el-col>
      <el-col :span="6">
        <p>场景名称：
          <span>{{this.$route.params.sceneName}}</span>
        </p>
      </el-col>
      <el-col :span="6">
        <p>机器人名称：
          <span>{{this.$route.params.robotName}}</span>
        </p>
      </el-col>
      <el-col :span="6">
        <p>预计时长：
          <span>{{this.$route.params.actualDuration}}</span>
        </p>
      </el-col>
      <el-col :span="6">
        <p>任务编号：
          <span>{{this.$route.params.taskCoding}}</span>
        </p>
      </el-col>
      <el-col :span="6">
        <p>场景编号：
          <span>{{this.$route.params.sceneCoding}}</span>
        </p>
      </el-col>
      <el-col :span="6">
        <p>机器人编号：
          <span>{{this.$route.params.robotCoding}}</span>
        </p>
      </el-col>
      <el-col :span="6">
        <p>实际时长：
          <span>{{this.$route.params.actualDuration}}</span>
        </p>
      </el-col>
      <el-col :span="6">
        <p>本次执行开始时间：
          <span>{{this.$route.params.startTime}}</span>
        </p>
      </el-col>
      <el-col :span="6">
        <p>本次执行完成时间：
          <span>{{this.$route.params.endTime}}</span>
        </p>
      </el-col>
    </el-row>

    <el-row>
      <p class="title">异常报警：</p>
      <el-col :span="12">
        <div class="environmentalAlarm">
          <div class="title-top">
            <div class="type">环境报警</div>
            <div class="alarm"></div>
          </div>
          <ul>
            <li>
              <p>
                机器人电量过低，请及时处理</p>
              <p>2022/12/08 15:30:56</p>
            </li>
            <li>
              <p>
                机器人机器人电量过低，请及时处理</p>
              <p>2022/12/08 15:30:56</p>
            </li>
            <li>
              <p>
                机器人电量过低，请及时处理</p>
              <p>2022/12/08 15:30:56</p>
            </li>
            <li>
              <p>
                机器人电量过低，请及时处理</p>
              <p>2022/12/08 15:30:56</p>
            </li>
          </ul>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="robotAlarm">
          <div class="title-top">
            <div class="type">机器人报警</div>
            <div class="alarm"></div>
          </div>
          <ul>
            <li>
              <p>
                机器人电量过低，请及时处理</p>
              <p>2022/12/08 15:30:56</p>
            </li>
            <li>
              <p>
                机器人机器人电量过低，请及时处理</p>
              <p>2022/12/08 15:30:56</p>
            </li>
            <li>
              <p>
                机器人电量过低，请及时处理</p>
              <p>2022/12/08 15:30:56</p>
            </li>
            <li>
              <p>
                机器人电量过低，请及时处理</p>
              <p>2022/12/08 15:30:56</p>
            </li>
          </ul>
        </div>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="12">
        <div class="map map2">
          <p class="title">场景地图：</p>
          <div class="img"></div>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="map map1">
          <p class="title">任务地图：</p>
          <div class="img"></div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  created () {
    console.log(this.$route.params);
  },
  methods: {
    goback () {
      this.$router.back()
    },
  },
}
</script>

<style lang="scss" scoped>
.top {
  padding: 0 20px;
  height: 54px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 2px solid rgba(230, 230, 230, 0.39);
  p {
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.85);
  }
  .el-icon-back {
    letter-spacing: 5px;
  }
}

.title {
  margin-bottom: 20px;
  font-size: 16px;
  color: #7f7f7f;
}

.map {
  .img {
    height: 399px;
  }
}

.map2 {
  margin-right: 8px;
  .img {
    background-image: url("../../../assets/robot/map2.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }
}
.map1 {
  margin-left: 8px;
  .img {
    background-image: url("../../../assets/robot/map1.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }
}

.environmentalAlarm {
  margin-right: 8px;
}
.robotAlarm {
  margin-left: 8px;
}

.environmentalAlarm,
.robotAlarm {
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1);
  padding-bottom: 18px;
  .title-top {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(
      180deg,
      rgba(255, 86, 0, 0.05) 0%,
      rgba(255, 86, 0, 0) 100%
    );
    padding: 12px 20px 0 32px;
    .type {
      font-size: 18px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      color: rgba(0, 0, 0, 0.85);
    }
    .alarm {
      background-image: url("../../../assets/robot/alarm.png");
      background-repeat: no-repeat;
      background-size: 100% 100%;
      width: 36px;
      height: 36px;
      border-radius: 50%;
    }
  }
  ul {
    li {
      height: 45px;
      line-height: 45px;
      margin: 0 29px;
      display: flex;
      flex-wrap: nowrap;
      justify-content: space-between;
      border-bottom: 2px solid rgba(230, 230, 230, 0.39);
      p {
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #bfbfbf;
      }
    }
  }
}

/deep/ .el-row {
  padding: 20px;
  border-bottom: 2px solid rgba(230, 230, 230, 0.39);
}

/deep/ .el-col {
  p {
    color: #bfbfbf;
    margin-bottom: 16px;
    span {
      color: #000000;
    }
  }
}
</style>